<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    strong{
      display: inline-block;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: pink;

      text-align: center;
      line-height: 100px;
    }
  </style>
</head>
<body>
    <div id="app">
      <!--父组件通过子组件的标签属性来给子组件传值  子组件通过props配置来接收父组件传递来的数据-->
      <v-count :count="count" :add="add"></v-count>
      <v-count :count="count" :add="add"></v-count>
    </div>
</body>
<script src="./js/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<script>

  //如果我们希望父组件传递给子组件的数据(基本数据类型 引用数据类型)  对于各个子组件来说都是共享的
  //不建议子组件直接修改父组件的数据!
  //让父组件的方法来修改父组件的数据  不管数据传不传递  这个数据都是响应式的!
  //让子组件调用到父组件的方法!
  Vue.config.productionTip = false;
  new Vue({
    el:"#app",
    data:{count:0},
    methods:{add(){this.count++}},

    components:{
      "v-count":{
        props:["count","add"],
        methods: {
            myAdd(){
                //....大量逻辑....
                this.add()
            }
        },
        template:"<strong @click='myAdd'>{{count}}</strong>"
      }
    }
  })
</script>
</html>